<template>
  <!-- <dv-full-screen-container> -->
  <div class="screen-container1">
    <div class="screen-content1" ref="screenRef">
      <div class="screen-header">
        <el-tooltip class="box-item" effect="dark" content="返回首页" placement="bottom">
          <img src="@/assets/screen/return.svg" class="backimg" @click="$router.push('/')" />
        </el-tooltip>

        <img src="@/assets/screen/title.svg" class="titleimg" />
        <el-tooltip class="box-item" effect="dark" content="设备预警" placement="bottom">
          <img
            v-if="isWarn"
            src="@/assets/screen/warm_abnormal.svg"
            class="warnimg"
            @click="$router.push({ path: '/operatecenter/oplogs', query: { logType: '警告' } })"
          />
          <img
            v-else
            src="@/assets/screen/warn_normal.svg"
            class="warnimg"
            @click="$router.push({ path: '/operatecenter/oplogs', query: { logType: '警告' } })"
          />
        </el-tooltip>
      </div>
      <div class="screen-top">
        <div class="cell">
          <img src="@/assets/screen/title_01.svg" class="title_img" />
          <!-- 本月上传情况 -->
          <screentoplfet />
        </div>

        <div class="center1">
          <div class="threebox">
            <screenThreeDay />
          </div>
        </div>
        <div class="cell">
          <img src="@/assets/screen/title_04.svg" class="title_img" />
          <!-- 本年违章 -->
          <ScreenBottomLeft />
        </div>
      </div>
      <div class="screen-bottom">
        <div class="cell">
          <img src="@/assets/screen/title_02.svg" class="title_img" />
          <!-- 本月上传视频不达标 -->
          <dv-scroll-ranking-board :config="upVideoConfig" />
        </div>
        <div class="center">
          <img src="@/assets/screen/title_03.svg" class="title_img" />
          <SwiperVideo />
        </div>
        <div class="cell">
          <img src="@/assets/screen/title_05.svg" class="title_img" />
          <!-- 本月违章查处 -->
          <dv-scroll-board class="dv-scr-board" :config="config" />
        </div>
      </div>
    </div>
  </div>

  <!-- </dv-full-screen-container> -->
</template>

<script setup lang="ts">
import windowResize from '@/utils/resize'
import { onMounted, onUnmounted, reactive, ref } from 'vue'
// import ScreenHeader from './components/screen-header/ScreenHeader.vue'
// import ScreenFooter from './components/screen-footer/ScreenFooter.vue'
// import ScreenTopLeft1 from './components/screen-top-left1/ScreenTopLeft1.vue'
// import ScreenTopLeft2 from './components/screen-top-left2/ScreenTopLeft2.vue'
// import ScreenTopCenter from './components/screen-top-center/ScreenTopCenter.vue'
// import ScreenTopRight1 from './components/screen-top-right1/ScreenTopRight1.vue'
// import ScreenTopRight2 from './components/screen-top-right2/ScreenTopRight2.vue'
import ScreenBottomLeft from './components/screen-bottom-left/ScreenBottomLeft.vue'
// import ScreenBottomRight from './components/screen-bottom-right/ScreenBottomRight.vue'
import SwiperVideo from './components/screen-bottom-right/swiperVideo.vue'
// import ScrollRankingBoard from './components/scrollRankingBoard/scrollRankingBoard.vue'
import screentoplfet from './components/screentopleft/screentopleft.vue'
import screenThreeDay from './components/screenThreeDay/screenThreeDay.vue'
import { ElTooltip, ElBadge } from 'element-plus'
import {
  getQualityReportRankingApi,
  getWarnInfoApi,
  getCurrentMonthReportApi,
  getCurrentThreeDayReportApi,
  getUpCurrentMonthReportApi
} from '@/api/screen'
const { screenRef, calcRate, windowDraw, unWindowDraw } = windowResize()
const loading = ref(true)

onMounted(() => {
  // 监听浏览器窗口尺寸变化
  windowDraw()
  calcRate()
  setTimeout(() => {
    loading.value = false
  }, 2000)
})

onUnmounted(() => {
  unWindowDraw()
})
const upVideoConfig = reactive({
  carousel: 'single',
  unit: '条',
  rowNum: 8,
  data: []
})

const getQualityReportRanking = async () => {
  const res = await getQualityReportRankingApi()
  if (res.data.length === 0) return
  upVideoConfig.data = res.data?.map((e: any) => {
    return {
      name: e.depName,
      value: e.count
    }
  })
}

getQualityReportRanking()
const isWarn = ref(false)
const getWarnInfo = async () => {
  const res = await getWarnInfoApi()
  console.log(res)
  isWarn.value = res.data || false
}
getWarnInfo()

const config = reactive({
  header: ['违章班组', '文件名', '上传时间'],
  intervalInstance: 0,
  data: [],
  indexHeader: '',
  rowNum: 7, //表格行数
  headerHeight: 35,
  headerBGC: '#1370fb00', //表头
  oddRowBGC: '#0f132500', //奇数行
  evenRowBGC: '#1370fb5500', //偶数行
  index: true,
  // columnWidth: [50, 90, 280, 180], //50,
  columnWidth: [50],
  align: ['center']
})
const getCurrentMonthReport = async () => {
  const res = await getCurrentMonthReportApi({})

  if (res) {
    let list = res.data

    config.data = list.map((item) => {
      return [item.depName, item.fileName, item.collectTime]
    })
  }
}
getCurrentMonthReport()

// const getUpCurrentMonthReport = async () => {
//   const res = await getUpCurrentMonthReportApi()
//   console.log('getUpCurrentMonthReport', res)
// }
// getUpCurrentMonthReport()
</script>

<style lang="scss">
// @import '/src/assets/scss/common/variables.scss';
.screen-container1 {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to bottom, #040744 40%, #040744 100%);
  // background-color: $theme-color;
  // background-image: url('@/assets/screen/bg.svg');

  .screen-content1 {
    // width: 1920px;
    // height: 1080px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-image: url('@/assets/screen/bg.svg');
    transition: all 0.2s ease-in-out;
    .screen-header {
      height: 10.3846vh;
      line-height: 10.3846vh;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 48px;
      .backimg {
        width: 38px;
        height: 38px;
        cursor: pointer;
        scale: 0.6;
      }

      .warnimg {
        width: 44px;
        height: 44px;
        cursor: pointer;
        scale: 0.6;
        animation: test 3s infinite;
      }
      @keyframes test {
        0% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.15);
        }
        // 100% {
        //   transform: translate(0.6);
        // }
      }
    }

    .screen-top,
    .screen-bottom {
      flex: 1;
      display: flex;
      padding: 0 30px;
      justify-content: space-between;
      .cell {
        flex: 1;
        height: 100%;
        background: rgba(0, 14, 98, 0.7);
        box-shadow: 0px 3px 30px 0px rgba(0, 120, 255, 0.4);
        border-radius: 4px;
        padding: 0 20px;
        overflow: hidden;
      }
      .center {
        flex: 1.5;
        height: 100%;
        margin: 0 20px;
        background: rgba(0, 14, 98, 0.7);
        box-shadow: 0px 3px 30px 0px rgba(0, 120, 255, 0.4);
        border-radius: 4px;
        overflow: hidden;
      }
      .center1 {
        flex: 1.5;
        height: 100%;
        margin: 0 20px;
        position: relative;
        .threebox {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          background: rgba(0, 14, 98, 0.7);
          box-shadow: 0px 3px 30px 0px rgba(0, 120, 255, 0.4);
          border-radius: 4px;
          // height: 173px;
          // // background: rgba(0, 14, 98, 0.7);
          // background-image: url('@/assets/screen/title_06.svg');
          // background-size: 100% 100%;

          // // box-shadow: 0px 3px 30px 0px rgba(0, 120, 255, 0.4);
          // // border-radius: 4px;
          // .threetitle {
          //   font-size: 18px;
          //   font-weight: bold;
          //   color: #fff;
          //   height: 40px;
          //   // background: linear-gradient(to right, #0078ff 0%, #d2e7ff 100%);
          // }
        }
      }

      .currentMonth {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 14px;
        grid-row-gap: 10px;
        margin-top: 10px;
        border-radius: 8px;
        overflow: hidden;
        // grid-gap: 8px;
        .numcell {
          height: 66px;
          line-height: 66px;
          color: #fff;
          padding: 0 24px;
          background-image: url('@/assets/screen/bg_upload.svg');
          opacity: 0.8;
        }
      }
    }
    .screen-bottom {
      margin-top: 10px;
      margin-bottom: 20px;
      height: 348px;
      overflow: hidden;
      background: rgba(0, 14, 98, 0.7);
      box-shadow: 0px 3px 30px 0px rgba(0, 120, 255, 0.4);
      border-radius: 4px;
    }
  }

  .title_img {
    width: 100%;
  }
}
</style>
